<template>
    <div class="bigbox">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field readonly v-model="username" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />

                <van-field v-model="newdata.pass1" type="password" name="原密码" label="原密码" placeholder="原密码"
                    :rules="[{ required: true, message: '请填写原密码' }]" />

                <van-field v-model="newdata.pass2" type="password" name="新密码" label="新密码" placeholder="新密码"
                    :rules="[{ required: true, message: '请填写新密码' }]" />

                <van-field v-model="pass3" type="password" name="确认新密码" label="确认新密码" placeholder="确认新密码"
                    :rules="[{ required: true, message: '请填写新密码' }]" />

            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    确认修改
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import router from "@/router";
import { useRouter } from "vue-router";
import { changepaaa } from '../../sevce/user'
import { showNotify } from 'vant';
import { showToast } from 'vant';
function gohome() {
    router.push('/home')
}


const newdata = ref({
    id: 0,
    pass1: '',
    pass2: '',
})
//新密码校验
let pass3 = ref('')

//用户
let username = ref('')


///users/users_updpass_api?id=1&pass1=123&pass2=456
const onSubmit = (values) => {
    if (newdata.value.pass2 == pass3.value) {
        changepaaa(newdata.value).then((res) => {
            if (res.data == 1) {
                showToast('成功')
                loginOut()
            } else if (res.data == 0) {
                showNotify({ type: 'danger', message: '原密码验证错误' });
            }
        }).catch(() => {
            showToast('错误，联系管理员')
        })
    } else {
        showNotify({ type: 'danger', message: '新密码两次输入不一致' });
    }


};

//读取本地存储 数据
function getuserinfo() {
    //读取本地存储的数据
    var data = JSON.parse(localStorage.getItem('userinfo'));
    if (data != null) {
        // console.log('本地存储数据', data)
        newdata.value.id = data.id
        username.value = data.names
    }
}
//退出登录
function loginOut() {
    localStorage.removeItem("userinfo")
    router.push("/login")
}
onMounted(() => {
    getuserinfo()
})
</script>

<style lang="scss" scoped>
.bigbox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 100vw;
    height: 80vh;
    background-color: #fff;
}
</style>